<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="翻译平台、翻译网站、找翻译、找人翻译、法语翻译、英语翻译、日语翻译、德语翻译、意大利语翻译、俄罗斯语、翻译人员、成都翻译、成都翻译员" />
<meta name="description" content="众译，助推翻译事业，选择最佳翻译人员，最迅速、最便捷的网络翻译平台。" />
<title>众译-可信赖的翻译平台-注册页面</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/reset.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/css.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/ui-lightness/jquery-ui-1.8.7.custom.css" />
<style type="text/css">
.errorMessage {
	color: red;
	text-align: left;
}
</style>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/global.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/config.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/citydata.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/chooselanguage.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/industry.js"></script>
<script type="text/javascript">
	$(function() {
		initExperience("experience", '');
		initBank('bank', '');
		initProvince("province");
		changeCity('province', 'city');
		$("#reg_submit").bind("click", preValidate);
		$(document).bind("keydown", hotKeyHandler);
		$("#chooselang").bind('click', openLanguageWindow);
		$("#choosearea").bind('click', openIndustryWindow);
		restore();
	});
	
	var langWindow = null;
	var industryWindow = null;
	
	function openIndustryWindow() {
		try {
			if (industryWindow == null) {
				industryWindow = new IndustryWindow(true);
			}
		} catch (e) {
			return;
		}
		industryWindow.show(setGoodAtArea);
	}
	
	function updateKeywords() {
		var words = new Array();
		words.push($("#chooselang").val());
		words.push($("#choosearea").val());
		var code = $("#province").val();
		code = parseInt(code);
		if (code > 0) {
			words.push($("option[value='" + code + "']").text());
		}
	 	code = $("#city").val();
		code = parseInt(code);
		if (code > 0) {
			words.push($("option[value='" + code + "']").text());
		}
		$('#keyWords').val(words.join(','));
	}
	
	function restore() {
		try {
			var val = $("#area_direction").val();
			var txt = new Array();
			if (val.length > 0) {
				val = val.split(',');
				for (var i = 0 ; i < val.length ; i ++) {
					txt.push(findIndustry(val[i]));	
				}
				$("#choosearea").val(txt.join(','));
			}
			
			val = $("#translate_direction").val();
			txt = new Array();
			if (val.length > 0) {
				val = val.split(',');
				for (var i = 0 ; i < val.length ; i ++) {
					txt.push(getTranslate(val[i]));	
				}
				$("#chooselang").val(txt.join(','));
			}
		} catch (e) {
		}
	}
	
	function setGoodAtArea(obj, args) {
		if (args.length <= 0) {
			$("#choosearea").val("请选择您的擅长领域");
			$("#area_direction").val('');
			return;
		}
		var txt = new Array();
		var hids = new Array();
		for (var i = 0 ; i < args.length ; i ++) {
			txt.push(args[i].txt);
			hids.push(args[i].id);
		}
		$("#choosearea").val(txt.join(","));
		$("#area_direction").val(hids.join(","));
	}
	
	function openLanguageWindow() {
		try {
			if (langWindow == null) {
				langWindow = new ChooseLanguageWindow();
			}
		} catch (e) {
			return;
		}
		langWindow.show(setGoodAtLang);
	}
	
	function setGoodAtLang(obj, args) {
		if (args.length <= 0) {
			$("#chooselang").val("<s:text name='error.good.at.lang'/>");
			$("#translate_direction").val('');
			return;
		}
		var txt = new Array();
		var hids = new Array();
		for (var i = 0 ; i < args.length ; i ++) {
			txt.push(args[i].txt);
			hids.push(args[i].id);
		}
		$("#chooselang").val(txt.join(","));
		$("#translate_direction").val(hids.join(","));
	}
	
	function hotKeyHandler(event) {
		switch (event.keyCode) {
		case 13:
			$("#reg_submit").focus();
			break;
		default:
			break;
		}
	}
	
	function addMessage(currentNode, preBrother, message) {
		if ((currentNode.attr("name") + "tips") == preBrother.attr("id")) {
			preBrother.find(".error_tips").text(message);
		} else {
			var tips = "<tr id='" + currentNode.attr("name") + "tips'>" +
				"<td></td>" +
				"<td><em class=\"error_tips\">"+message+"</em></td>" +
				"</tr>";
				preBrother.after(tips);
		}
	}
	
	function preValidate() {
		var result = true;
		
		$(":input[alt='necessary']").each(function (){
			
			var currentNode = $(this);
			
			var preBrother = currentNode.parent().parent().prev();
			
			var nodeAttrName = currentNode.attr("name");
			
			var nodeValue = currentNode.val();
			
			switch (nodeAttrName) {
				case "user.account":
					if (nodeValue.isEmpty()) {
						addMessage(currentNode, preBrother, "<s:text name='error.accout'/>");
						result = false;
					} else if (!nodeValue.isAlpha()) {
						addMessage(currentNode, preBrother, "<s:text name='error.accout.illegal'/>");
						result = false;
					} else {
						if ((currentNode.attr("name") + "tips") == preBrother.attr("id")) {
							preBrother.remove();
						}
					}
					break;
				case "user.nikeName":
					if (nodeValue.isEmpty()) {
						addMessage(currentNode, preBrother, "<s:text name='error.nikename'/>");
						result = false;
					} else if (!nodeValue.isAlpha()) {
						addMessage(currentNode, preBrother, "<s:text name='error.nikename.illegal'/>");
						result = false;
					} else {
						if ((currentNode.attr("name") + "tips") == preBrother.attr("id")) {
							preBrother.remove();
						}
					}
					break;
				case 'user.personal.goodAtLanguage':
					if (nodeValue.isEmpty()) {
						addMessage(currentNode, preBrother, "<s:text name='error.good.at.lang'/>");
						result = false;
					} else if (!nodeValue.isAlpha()) {
						addMessage(currentNode, preBrother, "<s:text name='error.good.at.lang'/>");
						result = false;
					} else {
						if ((currentNode.attr("name") + "tips") == preBrother.attr("id")) {
							preBrother.remove();
						}
					}
					break;
				case "user.password":
					if (nodeValue.isEmpty()) {
						addMessage(currentNode, preBrother, "<s:text name='error.password'/>");
						result = false;
					} else if (!nodeValue.isAlpha()) {
						addMessage(currentNode, preBrother, "<s:text name='error.password.illegal'/>");
						result = false;
					} else {
						if ((currentNode.attr("name") + "tips") == preBrother.attr("id")) {
							preBrother.remove();
						}
					}
					break;
				case "confirmPwd":
					if (nodeValue.isEmpty()) {
						addMessage(currentNode, preBrother, "<s:text name='error.confirm.password'/>");
						result = false;
					} else if (!nodeValue.isAlpha()) {
						addMessage(currentNode, preBrother, "<s:text name='error.password.illegal'/>");
						result = false;
					} else if (nodeValue != $(":input[name='user.password']").val()) {
						addMessage(currentNode, preBrother, "<s:text name='error.password.not.equal'/>");
						result = false;
					} else {
						if ((currentNode.attr("name") + "tips") == preBrother.attr("id")) {
							preBrother.remove();
						}
					}
					break;
				case "user.email":
					if (!nodeValue.isEmail()) {
						addMessage(currentNode, preBrother, "<s:text name='error.email'/>");
						result = false;
					} else {
						if ((currentNode.attr("name") + "tips") == preBrother.attr("id")) {
							preBrother.remove();
						}
					}
					break;
				case "user.cellPhone":
					if (!nodeValue.isCellPhone()) {
						addMessage(currentNode, preBrother, "<s:text name='error.cellphone'/>");
						result = false;
					} else {
						if ((currentNode.attr("name") + "tips") == preBrother.attr("id")) {
							preBrother.remove();
						}
					}
					break;
				case "authCode":
					if (!nodeValue.isAuthCode()) {
						addMessage(currentNode, preBrother, "<s:text name='error.authcode'/>");
						result = false;
					} else {
						if ((currentNode.attr("name") + "tips") == preBrother.attr("id")) {
							preBrother.remove();
						}
					}
					break;
				default:
					break;
			}
		});
		
		updateKeywords();
		
		if (result) {
			$("#reg_form").submit();
		}
	}
</script>
</head>
<body>
<div class="layout"><jsp:include page="/include/head/top.jsp" /> <jsp:include page="/include/head/top_nav.jsp" />
<div class="content">
<div class="reg">
<h1></h1>
<form action="<%=request.getContextPath()%>/signup/transer_reg_execute" enctype="multipart/form-data" method="post" id="reg_form">
<table>
	<tr>
		<td class="bline"></td>
		<td class="bline">
		<h1>译员注册</h1>
		</td>
	</tr>
	<tr>
		<td class="bline"></td>
		<td class="bline">
		<p>注：资料越详细，越容易让需求方选择您！</p>
		</td>
	</tr>
	<tr>
		<td></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td width="200" align="right">注册类型：</td>
		<td>译员</td>
	</tr>
	<s:if test="%{hasFieldErrors('user.account')}">
		<tr id="user.accounttips">
			<td></td>
			<td><em class="error_tips"><s:fielderror fieldName="user.account" /></em></td>
		</tr>
	</s:if>
	<tr>
		<td width="200" align="right">用户名：</td>
		<td><input type="text" class="intxt" name="user.account" alt="necessary" value="<s:property value='user.account'/>"/><i>*</i><span>请输入用户名，最好以邮箱为用户名</span></td>
	</tr>
	<s:if test="%{hasFieldErrors('user.nikeName')}">
		<tr id="user.accounttips">
			<td></td>
			<td><em class="error_tips"><s:fielderror fieldName="user.nikeName" /></em></td>
		</tr>
	</s:if>
	<tr>
		<td width="200" align="right">昵称：</td>
		<td><input type="text" class="intxt" id="nikename" name="user.nikeName" alt="necessary" value="<s:property value='user.nikeName'/>"/><i>*</i><span>请输入昵称</span></td>
	</tr>
	<s:if test="%{hasFieldErrors('user.password')}">
		<tr id="user.passwordtips">
			<td></td>
			<td><em class="error_tips"><s:fielderror fieldName="user.password" /></em></td>
		</tr>
	</s:if>
	<tr>
		<td align="right">密码：</td>
		<td><input type="password" class="intxt" name="user.password" alt="necessary" value="<s:property value='user.password'/>"/><i>*</i><span>请输入密码</span></td>
	</tr>
	<s:if test="%{hasFieldErrors('confirmPwd')}">
		<tr id="confirmPwdtips">
			<td></td>
			<td><em class="error_tips"><s:fielderror fieldName="confirmPwd" /></em></td>
		</tr>
	</s:if>
	<tr>
		<td align="right">确认密码：</td>
		<td><input type="password" class="intxt" name="confirmPwd" alt="necessary" value="<s:property value='confirmPwd'/>"/><i>*</i><span>请再次输入您的密码</span></td>
	</tr>
	<s:if test="%{hasFieldErrors('user.personal.goodAtLanguage')}">
		<tr id="confirmPwdtips">
			<td></td>
			<td><em class="error_tips"><s:fielderror fieldName="user.personal.goodAtLanguage" /></em></td>
		</tr>
	</s:if>
	<tr>
		<td align="right">精通语言：</td>
		<td>
		<input type="button" value="请选择您精通的语言" style="width:150px;" id="chooselang"/>
		<input type="hidden" value="<s:property value='user.personal.goodAtLanguage'/>" id="translate_direction" name="user.personal.goodAtLanguage" alt="necessary"/>
		<i>*</i><span>请选择您精通的语言</span></td>
	</tr>
	<s:if test="%{hasFieldErrors('user.email')}">
		<tr id="user.emailtips">
			<td></td>
			<td><em class="error_tips"><s:fielderror fieldName="user.email" /></em></td>
		</tr>
	</s:if>
	<tr>
		<td align="right">电子邮件：</td>
		<td><input type="text" class="intxt" name="user.email" alt="necessary" value="<s:property value='user.email'/>"/><i>*</i><span>请输入您的邮件地址例如：zhongyi@gmail.com</span></td>
	</tr>
	<s:if test="%{hasFieldErrors('user.cellPhone')}">
		<tr id="user.cellPhonetips">
			<td></td>
			<td><em class="error_tips"><s:fielderror fieldName="user.cellPhone" /></em></td>
		</tr>
	</s:if>
	<tr>
		<td align="right">手机：</td>
		<td><input type="text" class="intxt" name="user.cellPhone" alt="necessary" value="<s:property value='user.cellPhone'/>"/><i>*</i><span>请输入您的可联系手机号码，以便交易双方保持沟通通畅。</span></td>
	</tr>
	<s:if test="%{hasFieldErrors('authCode')}">
		<tr id="authCodetips">
			<td></td>
			<td><em class="error_tips"><s:fielderror fieldName="authCode" /></em></td>
		</tr>
	</s:if>
	<tr>
		<td align="right">验证码：</td>
		<td>
		<input type="text" class="intxt" alt="necessary" name="authCode"/>
		<i>*</i><span>请输入右边图片中的字符(不区分大小写)</span>
		<img src="<%=request.getContextPath() %>/AuthCodeServlet" alt="验证码" />
		</td>
	</tr>
	<tr>
		<td class="bline"></td>
		<td class="bline">
		<p>以下为选填内容</p>
		</td>
	</tr>
	<tr>
		<td></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td width="200" align="right">真实姓名：</td>
		<td><input type="text" class="intxt" name="user.realName" value="<s:property value='user.realName'/>"/></td>
	</tr>
	<tr>
		<td width="200" align="right">所属地区：</td>
		<td><select id="province" onchange="changeCity('province', 'city');" name="user.provice">
		</select>&nbsp; <select id="city" name="user.city">
		</select><span>翻译者请选择译员 &amp; 需求方请选择需求方</span></td>
	</tr>
	<tr>
		<td align="right">毕业院校：</td>
		<td><input type="text" class="intxt" id="college" name="user.personal.college" /><span>请填写您的毕业院校</span></td>
	</tr>
	<tr>
		<td align="right">翻译经验：</td>
		<td><select id="experience" name="user.personal.experience">
		</select><span>请选择您的翻译经验</span></td>
	</tr>
	<tr>
		<td align="right">擅长领域：</td>
		<td>
		<input type="button" value="请选择您的擅长领域" style="width:150px;" id="choosearea"/>
		<input type="hidden" value="<s:property value='user.personal.goodAtArea'/>" id="area_direction" name="user.personal.goodAtArea"/>
		<span>请选择您的擅长领域</span></td>
	</tr>
	<tr>
		<td align="right">IM：</td>
		<td><input type="text" class="intxt" name="user.im"  value="<s:property value='user.im'/>"/><span>输入您的QQ号或者网络联系方式</span></td>
	</tr>
	<tr>
		<td align="right">资质证书上传：</td>
		<td><input type="file" name="certificate" /><span>上传您的资质证书，以便让需求方更容易的选择您。</span></td>
	</tr>
	<tr>
		<td align="right">支付宝账号：</td>
		<td><input type="text" class="intxt" name="user.alipay" value="<s:property value='user.alipay'/>"/><span>方便管理您收益所得</span></td>
	</tr>
	<tr>
		<td align="right">银行账号：</td>
		<td><select id="bank" style="width: 110px;" name="user.personal.bank">
			<option>中国建设银行</option>
		</select> <input type="text" class="intxt" name="user.personal.bankNumber" value="<s:property value='user.personal.bankNumber'/>"/><span>方便管理您收益所得</span></td>
	</tr>
	<tr>
		<td align="right"></td>
		<td><input type="checkbox" checked="checked" /><label>是的，我接受众译的所有<a href="#">服务条款</a>. </label></td>
	</tr>
	<tr>
		<td>
		<input type="hidden" value="" id="keyWords" name="user.keyWords"/>
		</td>
		<td><input type="button" value="" class="regbtn" id="reg_submit"/></td>
	</tr>
</table>
</form>
</div>
</div>
<jsp:include page="/include/foot/foot.jsp" />
</div>
</body>
</html>
